<template>
    <rx-dialog :showcancel="false" :showok="false">
        <rx-layout>
            <div slot="center">
                <rx-fit>
                    <rx-grid
                        ref="table"
                        :dataSource="formExecutes"
                        :allowRowSelect="false"
                        :multiSelect="false"
                        :showPage="false"
                        :bordered="false"
                        :columns="columns"
                        id-field="id"
                    >
                         <span slot="status" slot-scope="{ text, record }">
                              <a-tag :color="statusMap[text].color">
                                <span>{{ statusMap[text].text }}</span>
                              </a-tag>
                        </span>
                        <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                            <span @click.stop="getSqlAndRecord(record)">{{i18n('list.view','查看')}}</span>
                        </span>
                    </rx-grid>
                </rx-fit>
                <a-drawer
                    :title="i18n('list.exeDetail','执行详情')"
                    width="520"
                    :z-index="99999"
                    :closable="false"
                    :visible="visible"
                    @close="onClose"
                >
                    <a-divider>{{i18n('form.exeSql','执行SQL')}}</a-divider>
                    <p>{{selectFormExecute.sql}}</p>
                    <a-divider>{{i18n('form.exeRecord','执行记录')}}</a-divider>
                    <p>{{selectFormExecute.record}}</p>
                </a-drawer>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import FormExecuteLogApi from '@/api/form/core/formExecuteLog'
import {RxDialog,} from "@lowcode/jpaas-common-lib";


export default {
    name: 'FormExecuteLogEdit',
    components: {
        RxDialog,
    },
    props:["batch"],
    data() {
        return {
            statusMap: {
                '1': {color: 'green', text: this.i18n('statusMap.success','成功')},
                '0': {color: 'red', text: this.i18n('statusMap.failure','失败')},
            },
            mdl:{},
            columns: [
                {title: this.$ti18('rxList.index','序号'), type: 'indexColumn', width: "10%", dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
                {title: this.i18n('form.dataSourceAlias','数据源别名'), dataIndex: 'datasource', width: "20%",},
                {title: this.i18n('form.status','状态'), dataIndex: 'status', width: "10%", scopedSlots: {customRender: 'status'}},
                {title: this.i18n('form.executor','执行人'), dataIndex: 'createByName', width: "25%"},
                {title: this.i18n('form.exeTime','执行时间'), dataIndex: 'createTime', width: "25%"},
                {title: this.$ti18('rxList.action','操作'), width: "10%", dataIndex: 'action', scopedSlots: {customRender: 'action'}}
            ],
            formExecutes:[],
            visible:false,
            selectFormExecute:{}
        }

    },
    created() {
        this.getByBatch();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"FormExecuteLog",key);
        },
        getByBatch() {
            FormExecuteLogApi.getByBatch(this.batch).then(res=>{
                if(res && res.success){
                    this.formExecutes=res.data;
                }
            });
        },
        getSqlAndRecord(record){
            this.visible=true;
            this.selectFormExecute=record;
        },
        onClose(){
            this.visible=false;
        }
    }
}
</script>
<style>
.relick a {
    margin-right: 10px;
}

</style>
